fix Logo.js
引入 drei 中的 clone 協助建立複製品

const { scene, materials } = useGLTF('/元藥堂.gltf')

const cloneScene = scene.clone ///  clone

import React, { Suspense, useRef, useState } from 'react'

import { Canvas, useFrame, applyProps } from '@react-three/fiber'
// import GoldenText from './GoldenText'
// import { OrbitControls, Bounds, BakeShadows, Environment, ContactShadows } from '@react-three/drei'
import * as THREE from 'three'
import { useLayoutEffect } from 'react'
import { AccumulativeShadows, Clone, RandomizedLight, OrbitControls, Environment, useGLTF } from '@react-three/drei'
import { FlakesTexture } from 'three-stdlib'
.........
export function GoldenLogo(props) {
  const { scene, materials } = useGLTF('/元藥堂.gltf')

  const cloneScene = scene.clone()
  // const { scene, materials } = useGLTF('https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/models/suzanne-high-poly/model.gltf')
  useLayoutEffect(() => {
    cloneScene.traverse((obj) => obj.isMesh && (obj.receiveShadow = obj.castShadow = true))
    applyProps(materials.Golden, {
      color: 'orange',
      roughness: 0,
      normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
      'normalMap-repeat': [40, 40],
      normalScale: [0.05, 0.05]
    })
    applyProps(materials.TexTboxBase, {
      color: '#1C1F1E',
      roughness: 0,
      normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
      'normalMap-repeat': [40, 40],
      normalScale: [0.05, 0.05]
    })

    // applyProps(materials.insideBase, {
    //   color: 'FFBD33',
    //   roughness: 0,
    //   normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
    //   'normalMap-repeat': [40, 40],
    //   normalScale: [0.05, 0.05]
    // })
  })
  return <primitive object={cloneScene} {...props} />
}

fix Intro.js
添加 <div className="buttom-layer" onClick={() => setClicked(true)} />
作為點擊層

style.js

.buttom-layer {
  position: absolute;
  z-index: 1000;
  width: 100vw;
  height: 80vh;
  top: 80px;
  left: 0px;
  background-color: #ffffff;
  opacity: 0.001;
}

import { Suspense, cloneElement, useEffect, useState } from 'react'
import Logo from './Logo'

function Ready({ setReady }) {
  useEffect(() => () => void setReady(true), [])
  return null
}

export default function Intro({ children }) {
  const [clicked, setClicked] = useState(false)
  const [ready, setReady] = useState(false)
  return (
    <>
      <Suspense fallback={<Ready setReady={setReady} />}>{cloneElement(children, { ready: clicked && ready })}</Suspense>
      <div className={`fullscreen bg ${ready ? 'ready' : 'notready'} ${clicked && 'clicked'}`}>
        <div className="stack">
          <div className="buttom-layer" onClick={() => setClicked(true)} />
          {/* <a href="#" onClick={() => setClicked(true)}>
            {!ready ? 'loading' : 'click to continue'}
          </a> */}
          {/* <img onClick={() => setClicked(true)} src="/藥堂.svg" width="100%" alt="SVG as an image" /> */}
          <Logo />
        </div>
      </div>
    </>
  )
}